var tpl = `my 'name' is <%this.name%>.
<%for (var skill of this.skills) {%> 
I can <%skill%>.
<%}%>
I am <%this.profile.age%> years old.`;


var data = {
    name: "Krasimir",
    skills: ['singe','dance','drawing'],
    profile: {
        age: 29,
    }
};
function temp () {
    let code = []
    code.push('my name is ')
    code.push(this.name)
    for (var skill of this.skills) {
        code.push('. I can ')
        code.push(skill);
    }
    code.push('. I am ')
    code.push(this.profile.age)
    code.push(' years old.')
    return code.join('');    
}

function temp04 () {
    var re = /<%([\w\s$(){}.]+)?%>/g;
    let code = 'let code = []\n';
    let match = null;
    let cursor = 0;
    let arr = ['{', '}'];
    let reJsStatement = /\{|\}/;
    var add = function(line, isJS) {
        if (isJS) {
            if (reJsStatement.test(line)) {
                code += line
            } else {
                code += 'code.push(' + line + ')\n';
            }
        } else {
            code += 'code.push(`' + line + '`)\n';
        }
    }
    while(match = re.exec(tpl)) {
        // console.log(match)
        let substr = tpl.slice(cursor, match.index);
        add(substr)
        add(match[1], true)
        cursor = re.lastIndex;
    }
    add(tpl.slice(cursor));
    code += "return code.join('')";
    console.log(code);
    return new Function(code);
}
// temp04();
function render (tpl, data) {
    // return temp.call(data);
    return temp04().call(data)
}
let out = render(tpl, data);
console.log('-------------');
console.log(out)